<template>
  <a-layout style="min-height:100vh">
    <a-layout-header style="display:flex;align-items:center;gap:16px;color:#fff;font-size:16px">
      <strong style="font-size:18px">流程管理</strong>
      <a-input
        v-model:value="userId"
        placeholder="输入当前用户ID (如 EMP001)"
        style="width:200px" />
      <a-button size="small" @click="applyUser">设置用户</a-button>
      <a-menu mode="horizontal" theme="dark" :selectedKeys="[active]" @click="onMenu" style="flex:1">
        <a-menu-item key="deployments">部署</a-menu-item>
        <a-menu-item key="definitions">定义</a-menu-item>
        <a-menu-item key="tasks">任务</a-menu-item>
        <a-menu-item key="instances">实例</a-menu-item>
        <a-menu-item key="my-applications">我的申请</a-menu-item>
        <a-menu-item key="my-tasks">我的待办</a-menu-item>
        <a-menu-item key="editor">编辑器</a-menu-item>
      </a-menu>
      <span style="margin-left:auto">当前用户: {{ currentUserId || '未设置' }}</span>
    </a-layout-header>
    <a-layout-content style="padding:16px">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { currentUserId, setCurrentUser } from './store/user';

const router = useRouter();
const route = useRoute();
const userId = ref(currentUserId.value);
const active = ref(route.path.replace('/', '') || 'deployments');

watch(() => route.path, (p) => { active.value = p.replace('/', '') || 'deployments'; });

function onMenu(e: any) {
  const key = e.key;
  router.push('/' + key);
}

function applyUser() {
  setCurrentUser(userId.value.trim());
}
</script>
<script setup lang="ts">
</script>
<style>
body { margin:0; }
</style>
